<template>
    <view>
        <view style="display: flex;justify-content: center;margin-top: 26rpx;">
            <u-radio-group v-model="type" @change="changeType" shape="square" >
                <u-radio label-size="36" icon-size="36"
                    v-for="(item, index) in type_list" :key="index" 
                    :name="item.name">
                    {{item.title}}
                </u-radio>
            </u-radio-group>
        </view>

        <view @click="show = true" style="margin: 50rpx;" v-if="type=='bank'">
            <text>点击选择提现银行卡</text>
            <view class="card-item">
                <view class="card-item-top">
                    <image :src="craditem.bank_logo" mode="scaleToFill" style="width: 372rpx;height: 108rpx;"></image>
                    <view>{{craditem.account_bank}}</view>
                </view>
                <view class="card-item-bottom">
                    <view>{{craditem.card_number}}</view>
                    <view>{{craditem.account_name}}</view>
                </view>
            </view>
            <view style="margin-top: 25rpx;">
                <u-alert-tips type="warning"  :description="description"></u-alert-tips>    
            </view>
        </view>
            
        <u-select v-model="show" :list="cradList" label-name="card_number" value-name="id" @confirm="selctConfirm"></u-select>
        
        <view class="box">
            <p>输入提现金额</p>
            <text class="text1">￥</text>
            <input type="number" v-model="money"/>
            <hr>
            <view class="text2"><text>剩余可提现金额为{{balance}}元，提现成功后金额会存入您的微信零钱中，请留意余额变动</text></view>
            <button class="button" @click="free" :disabled="freeBtn">提现</button>
        </view>
        
        <u-modal v-model="modelShow" title="请确认提现信息" show-cancel-button @confirm="_postCash" >
            <view style="padding: 20rpx 40rpx;">
                <view>卡号：{{craditem.card_number}}</view>
                <view>持卡人：{{craditem.account_name}}</view>
                <view>银行：{{craditem.bank_name}}</view>
                <view>开户行：{{craditem.account_bank}}</view>
            </view>
        </u-modal>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                balance: 0,
                show: false,
                card: '',
                cradList: [],
                craditem: {},
                selectId: '',
                money: '',
                modelShow: false,
                type_list: [
                    {
                        name: 'wechat',
                        title: '微信'
                    },
                    {
                        name: 'bank',
                        title: '银行卡'
                    }
                ],
                type: 'wechat',
                description:"银行卡提现是人工操作，预计提现到账时间为5个工作日内",
				freeBtn:false
            };
        },
        mounted() {
			 this._getuserBalance();
        },
        methods: {
            changeType(e){
                console.error(e)
                if(e == "bank"){
                    this._getuserBalance();
                }
            },
            free() {
                if (!this.$u.test.amount(this.money)) {
                    uni.showToast({
                        title: '请输入正确提现金额',
                        duration: 1500,
                        icon: 'none'
                    });
                    return ;
                } 
                if(this.type == 'bank'){
                    if(this.$u.test.isEmpty(this.selectId)) {
                        uni.showToast({
                            title: '请先选择或添加银行卡',
                            duration: 1500,
                            icon: 'none'
                        });
                        return ;
                    } else {
                        this.modelShow = true;
						this.freeBtn = true
                    }
                }else{
					this.freeBtn = true
                    this._postCash()
                }
            },
            _getuserBalance() {
                this.$u.api.getuserBalance().then(res => {
                    // this.money = res.money;
                    // this.list = res.list;
                    this.balance = res.balance;
					if(this.type == 'bank'){
						this._getbankcardlist();
					}
                }).catch(e => {
                    
                })
            },
            _getbankcardlist() {
                let that = this
                this.$u.api.getbankcardlist().then(res => {
                    if(res.length <= 0) {
                        uni.showModal({
                            title: '提示',
                            content: '至少先设置一张银行卡',
                            showCancel: false,
                            success: function (res) {
                                // uni.navigateBack({
                                //     delta: 2
                                // });
								uni.navigateTo({
									url:'/mypages/Myhome/card'
								})
							
								
                                // that.type = "wechat"
                            }
                        });
                    } else {
                        this.cradList = res;
                        this.craditem = res[0];
                        this.selectId = res[0].id;
                    }
                })
            },
            selctConfirm(i) {
                let id = i[0].value;
                this.selectId = id;
                this.cradList.forEach((item, index) => {
                    if(item.id == id) {
                        this.craditem = this.cradList[index];
                        return;
                    }
                })
            },
            _postCash() {				
                this.$u.api.postCash({
                    money: this.money,
                    cardId: this.selectId,
                    type:this.type
                }).then(res => {
                    if(this.type =="bank"){
                        uni.showToast({
                            title: "银行卡提现是人工操作，预计提现到账时间为5个工作日内",
                            duration: 1500,
                            icon: 'none'
                        });
                    }
                    setTimeout(()=>{
                        uni.navigateTo({
                            url: "Withdrawal_result"
                        })
                    },1500)
                    
                }).catch(err => {
                    uni.showToast({
                        title: err.msg,
                        duration: 1500,
                        icon: 'none'
                    });
					this.freeBtn = false
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    .card-item {
        background-color: #ffffff;
        border-radius: 20rpx;
        overflow: hidden;
        margin-top: 20rpx;
        
        .card-item-top {
            display: flex;
            // align-items: center;
            justify-content: space-between;
            
            image {
                
            }
            
            view {
                margin: 20rpx 20rpx 0 0;
            }
        }
        
        .card-item-bottom {
            display: flex;
            justify-content: space-between;
            padding: 20rpx;
        }
    }
    
    .box {
        margin: 125rpx 150rpx;
        
        input {
            position: relative;
            top: -50rpx;
            left: 60rpx;
            width: 300rpx;
        }
        
        hr {
            margin-top: -40rpx;
            width: 450rpx;
            height: 4rpx;
            background-color: #000000;
        }
        
        p {
            margin-bottom: 35rpx;
            font-size: 24rpx;
            color: #191919;
        }
        
        .text1 {
            font-size: 50rpx;
            color: #191919;
        }
        
        .text2 {
            font-size: 24rpx;
            color: #999999;
        }
        
        .button {
            width: 450rpx;
            height: 98rpx;
            background-color: #1bc078;
            border-radius: 49rpx;
            border-radius: 49rpx;
            margin-top: 100rpx;
            color: #FFFFFF;
            font-size: 28rpx;
            line-height: 98rpx;
        }
    }
</style>
